<template>
    <div v-html="compiledMarkdown"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { marked } from 'marked';
import {ossUpload} from './api/';


const compiledMarkdown = ref('');

onMounted(() => {
    ossUpload().then(({ data }) => {
        compiledMarkdown.value = marked(data);
    }).catch(error => {
        console.error('请求失败:', error);
    });
});
</script>

<style>
/* 样式可以根据需要添加 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    padding: 20px;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333;
    margin-top: 0;
}

h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 0.5em;
}

p {
    margin-bottom: 1em;
}

pre {
    background-color: #333;
    color: #f8f8f8;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
}

code {
    font-family: 'Courier New', Courier, monospace;

    color: #ffffff;
    padding: 2px 4px;
    border-radius: 3px;
}

a {
    color: #1a0dab;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

blockquote {
    background-color: #eaeaea;
    border-left: 5px solid #1a0dab;
    padding: 15px;
    font-style: italic;
}

blockquote p {
    margin-bottom: 0;
}

ul,
ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

img {
    max-width: 100%;
    height: auto;
}
</style>